<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import { Chart, register } from "@antv/g2";
import myTheme from "../theme.json";

// 准备数据
const data = [
  { letter: "A", frequency: 0.08167 },
  { letter: "B", frequency: 0.01492 },
  { letter: "C", frequency: 0.02782 },
  { letter: "D", frequency: 0.04253 },
  { letter: "E", frequency: 0.12702 },
  { letter: "F", frequency: 0.02288 },
  { letter: "G", frequency: 0.02015 },
  { letter: "H", frequency: 0.06094 },
  { letter: "I", frequency: 0.06966 },
  { letter: "J", frequency: 0.00153 },
  { letter: "K", frequency: 0.00772 },
  { letter: "L", frequency: 0.04025 },
  { letter: "M", frequency: 0.02406 },
  { letter: "N", frequency: 0.06749 },
  { letter: "O", frequency: 0.07507 },
  { letter: "P", frequency: 0.01929 },
  { letter: "Q", frequency: 0.00095 },
  { letter: "R", frequency: 0.05987 },
  { letter: "S", frequency: 0.06327 },
  { letter: "T", frequency: 0.09056 },
  { letter: "U", frequency: 0.02758 },
  { letter: "V", frequency: 0.00978 },
  { letter: "W", frequency: 0.0236 },
  { letter: "X", frequency: 0.0015 },
  { letter: "Y", frequency: 0.01974 },
  { letter: "Z", frequency: 0.00074 },
];
let chart;

onMounted(() => {
  register("theme.myTheme", () => {
    return myTheme; // 自定义主题
    // return {  // 在默认主题基础下，简单更改配色
    //   ...ClassicDark(),
    //   color: "pink",
    // };
  });
  // 初始化图表
  chart = new Chart({
    container: document.getElementById("container"),
    // width: 1000,
    // height: 600,
    autoFit: true,
    // paddingLeft: 400,
    // marginLeft:200,
    // renderer: 'canvas', // 指定渲染引擎，默认使用 canvas。 没搞明白
    // plugins:  // 指定渲染时使用的插件
  });
  // 声明可视化
  chart
    .title('简单柱形图')
    // .theme({ type: "myTheme" }) // 自定义主题颜色生效
    // .theme({ type: 'classicDark' })  // 默认主题颜色未生效(g2新版本5.2.0有问题，5.1.16 没有问题)
    .interval() // 创建一个interval标记
    // .data({
    //   type: "fetch",
    //   value: "/g2Api/year-population.json",
    //   transform: [
    //     {
    //       type: "filter",
    //       callback: (value) => {
    //         if (value.population > 1800) {
    //           return value;
    //         }
    //       },
    //     },
    //     {
    //       type: "sort",
    //       callback: (a, b) => {
    //         return b.population - a.population;
    //       },
    //     },
    //   ],
    // }) // 绑定数据
    .data({
      type: "inline",
      value: data,
      // transform: [
      //   // {
      //   //   type: "kde",
      //   //   field: "sold",
      //   //   groupBy: ["x", "genre"],
      //   //   as: ["cc", "aa"],
      //   // },
      //   // {
      //   //   type: "map",
      //   //   callback: (item, index) => {
      //   //     return { ...item, index };
      //   //   },
      //   // },
      //   // {
      //   //   type: "pick",
      //   //   fields: ["genre", "sold", "index"],
      //   // },
      //   // {
      //   //   type: "rename",
      //   //   genre: "name",
      //   //   sold: "value",
      //   // },
      //   // {
      //   //   type: "slice",
      //   //   start: 0,
      //   // },
      //   // {
      //   //   type: "sortBy",
      //   //   fields: ["value"],
      //   // },
      //   // {
      //   //   type: "log",
      //   // },
      // ],
    })
    .encode("x", "letter")
    // .encode("x", (data) => {
    //   // console.log(data)
    //   // return new Date(data.year)
    //   return data.genre;
    // }) // 编码x轴
    .encode("y", "frequency"); // 编码y轴
  // .encode("color", "name")
  // .encode("color", "value")
  // .encode("color", ({ value }) => {
  //   // 这儿的 high 和 low 代表的是分类
  //   if (value > 200) {
  //     return "high";
  //   }
  //   return "low";
  // });
  // .encode("opacity", "value")
  // .encode("size", "value")
  // .encode("series", ({ value }) => {
  //   // 这儿的 high 和 low 代表的是分类
  //   if (value > 200) {
  //     return "high";
  //   }
  //   return "low";
  // })
  // .encode("key", "name"); // key值更新更高效

  // .theme({
  //   type: 'classicDark'
  // }) // 定义主题颜色 light | dark | classic | classicDark | academy

  // 渲染可视化  render会返回一个promise
  chart.render().then((res) => {
    setTimeout(() => {
      console.log("开始更新");
      res.changeData([
        { letter: "A", frequency: 0.08167 },
        { letter: "B", frequency: 0.01492 },
        { letter: "C", frequency: 0.02782 },
        { letter: "D", frequency: 0.04253 },
        { letter: "E", frequency: 0.12702 },
      ]);
    }, 2000);
  });
});

// 销毁
onUnmounted(() => {
  chart.destroy();
  chart = null;
});
</script>

<style lang="less" scoped>
#container {
  width: 800px;
  height: 400px;
}
</style>
